<template>
  <el-row class="footer">
      <span class="f-map">
        <!--<a href="//7xjsdj.dl1.z0.glb.clouddn.com/im_win.rar" :title="$t('login.downloadSoftphone')" target="-blank">{{$t('login.downloadSoftphone')}}</a>-->
        <!--<span></span>-->
        <span class="parspan" @click.stop="showWeiXinImg" v-if="footerConfig.showWxHelper">
          <div class="weitip">
            <img class="wx-image" :src="footerConfig.showWxHelper" alt="微信公众号">
          </div>
          <div class="circle" v-show="noPublic"></div>
          {{$t('login.weixin')}}
        </span>
        <span class="line" v-show="footerConfig.showWxHelper !== ''"></span>
        <a href="//www.7moor.com/developer" target="_blank" :title="$t('login.kaifa')">{{$t('login.kaifa')}}</a>
        <span class="line"></span>
        <span class="parspan-app" v-show="footerConfig.iosAppUrl !== '' && footerConfig.androidAppUrl !== ''">
          <div class="weitip">
            <div class="title">
              <span v-text="platformUrls.platform_type !== 'tx' ? $t('login.appTitle') : $t('login.appTitle1')"></span>
            </div>
            <div style="flex-direction: inherit;display: flex;justify-content: center;color: #666">
              <div style="width: 200px">
                <img :src="footerConfig.iosAppUrl" height="100" width="100">
                <div>{{$t('login.iosDown')}}</div>
                <div>{{$t('login.appDownTip1')}}</div>
              </div>
              <div style="width: 200px">
                <img :src="footerConfig.androidAppUrl" height="100" width="100">
                <div>{{$t('login.androidDown')}}</div>
                <div>{{$t('login.appDownTip')}}</div>
              </div>
            </div>
            <div class="app-version">
              <p>应用版本：{{footerConfig.andVer}} <a  style="color:#459ae9!important;" href="https://m.7moor.com/static/m7Permission.html" target="_blank">用户权限</a> | <a style="color:#459ae9!important;" href="https://m.7moor.com/static/m7AppPrivacyPolicy.html" target="_blank">隐私政策</a></p>
              <p>开发者：北京容联七陌科技有限公司</p>
            </div>
          </div>
          {{$t('login.intelligentCommunicate')}}
        </span>
        <!--<a href="//www.7moor.com/download" :title="$t('login.intelligentCommunicate')" target="_blank">{{$t('login.intelligentCommunicate')}}</a>-->
        <span class="line" v-show="footerConfig.iosAppUrl !== '' && footerConfig.androidAppUrl !== ''"></span>
        <span class="parspan" @click.stop="closeUpdate">
          <a :href="footerConfig.updateUrl" target="_blank">
            <div class="circle" v-if="updateV"></div>
            {{$t('login.versionRe')}}
          </a>
        </span>
 </span>
    <ul class="f-cp">
      <li>{{$t('login.businessLicense')}}</li>
      <li>{{$t('login.rongLianSevenStreet')}}</li>
      <li><a href="http://beian.miit.gov.cn/" target="_blank" class=""><span class="kf_record">{{$t('login.beijingICP')}}</span></a></li>
    </ul>
  </el-row>
</template>
<script>
  export default {
    name: 'Footer',
    data () {
      return {
        noPublic: true
      }
    },
    props: {
      updateVer: Object
    },
    computed: {
      footerConfig () {
        return this.$store.state.iframeMessage.footerConfig
      },
      platformUrls () {
        return this.$store.state.platform_urls
      },
      updateV () {
        return this.updateVer.updateVer
      }
    },
    methods: {
      closeUpdate () {
        this.$emit('closeUpdate', false)
      },
      showWeiXinImg () {
        this.noPublic = false
        window.localStorage.setItem('noPublic', this.noPublic)
      }
    },
    beforeMount () {
      if (window.localStorage.getItem('noPublic')) {
        this.noPublic = JSON.parse(window.localStorage.getItem('noPublic'))
      } else {
        this.noPublic = true
      }
    }
  }
</script>
<style lang="stylus" scoped>
@import "styl/_login"
  .footer
    margin-top 70px
    color #666
    text-align  center
    font-size 12px
    li
      display inline
      line-height 20px
    .f-tel li
      margin-left 33px
    .f-tel li:first-child
      margin-left 8px
    .f-cp
      margin-top 3px
      li
        margin-right 23px
    .f-map
      line-height 24px
      color #333
      .parspan
        margin-right 9px
        position relative
        cursor pointer
        .weitip
          visibility: hidden;
          position: absolute;
          z-index: 103;
          background-color: #fff;
          top: -208px;
          left: -50px;
          width: 180px;
          padding: 10px 0;
          border-radius: 4px;
          box-shadow: 0 1px 14px #ccc;
        .circle
          top: 0px;
          right: 0px;
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #ff6b6b;
      .parspan-app
        margin-right 9px
        position relative
        cursor pointer
        .title
          font-size: 14px;
          margin-bottom: 5px;
          color: #000;
        .weitip
          visibility: hidden;
          position: absolute;
          z-index: 103;
          background-color: #fff;
          top: -220px;
          left: -160px;
          width: 440px;
          padding: 15px 0px;
          border-radius: 4px;
          box-shadow: 0px 1px 14px #ccc;
        .circle
          top: 0px;
          right: 0px;
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #ff6b6b;
      .parspan:hover
        .weitip
          visibility visible
      .parspan-app:hover
        .weitip
          visibility visible
      a
        margin-right 9px
        position relative
        color #333
        .circle
          top: 0px;
          right: 0px;
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #ff6b6b;
      .line
        border-right 1px solid #333
        margin-right 10px
        font-size 12px
  .wx-image
    height 180px
  .app-version
    color rgb(102, 102, 102)
    margin-top 6px
  .kf-login-container .footer .f-map, .kf-login-container .footer .f-map .app-version a
    margin-right 0
</style>
